import React from 'react'
import _ from 'underscore'
import $ from 'jquery'
import View from 'lib/View.jsx'
import {Scope} from 'lib/scopeFactory'
import {Success,Info,Warning} from 'lib/components/Notify.jsx'
import {updateAccountApi} from '../apis/validApis/account'
import dispatcher from 'lib/dispatcher'

class BasicInfoScope extends Scope {
  constructor(props){
    super(props)
    this.$state = {
      form:{
        saving:false,
        editable:false,
        errors:{}
      }
    }
  }
}
export default class BasicInfoForm extends View {
  constructor(props){
    super(props);
    this.edit = this.edit.bind(this)
    this.cancel = this.cancel.bind(this)
    this.save = this.save.bind(this)
  }
  edit(){
    this.state.form.editable = true
    this.state.form.errors = {}
    this.setState({
      form:this.state.form
    })
  }
  cancel(){
    this.state.form.editable = false
    this.state.form.errors = {}
    this.setState({
      form:this.state.form
    })
  }
  save(){
    updateAccountApi({
      id:BlueWare.accountId,
      name:$(this.refs.appName).val()
    }).post().then((res) => {
      if(res.result){
        this.state.form.editable = false
        Success('保存成功')
      }else{
        Warning('保存失败')
      }
      this.forceUpdate()
    },(err) => {
      this.state.form.errors = err.errors
      this.forceUpdate()
    },() => {
      this.state.form.saving = true
      this.state.form.errors = {}
      this.forceUpdate()
    }).always(() => {
      this.state.form.saving = false
      this.forceUpdate()
    })
  }
  render(){
    return (
      <div className="card">
        <h5 className="card-title">
          <div className="float-right">
            {
              this.state.form.saving?(
                <span>保存中 . . . </span>
              ):(
                this.state.form.editable?(
                  [
                  <button key="save" className="btn-green btn-xs" type="button" onClick={this.save}>
                    保存
                  </button>,
                  <button key="cancle" className="btn-gray btn-xs" type="button" onClick={this.cancel}>
                    取消
                  </button>
                  ]
                ):(
                  <button className="btn-blue btn-xs" type="button" onClick={this.edit}>
                    修改
                  </button>
                )
              )
            }
          </div>
          基本信息
        </h5>
        <div className="form-group horizontal">
          <ul>
            <li key="appName">
            <label className="control-label">App 名称</label>
            <input ref="appName" className="input-text" type="text" defaultValue={BlueWare.appName} disabled={!this.state.form.editable}/>
            {
              this.state.form.errors.name?(
                <span className="msg-error">{this.state.form.errors.name}</span>
              ):null
            }
            </li>
            <li key="code">
            <label className="control-label">APP Token</label>
            <code className="code">
              {BlueWare.setup_token}
            </code>
            </li>
          </ul>
        </div>
      </div>
    )
  }
}
BasicInfoForm.defaultProps = {
  Scope:BasicInfoScope
}
